<template>
  <form @submit.prevent="handleSearch" class="search-section">
    <input placeholder="搜索文章" type="text" v-model="searchQuery"/>

    <button type="submit"><i class="layui-icon layui-icon-search"></i>搜索</button>
  </form>

</template>

<script setup>
const searchQuery = ref('');
const router = useRouter();
const emit = defineEmits(['search']);

const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    alert('请输入搜索内容');
    return;
  }
  router.push({path: '/search', query: {search: searchQuery.value}});
  emit('search', searchQuery.value);
}
</script>

<style scoped>
/* 搜索部分 */
.search-section {
  display: flex;
  max-width: 350px;
}

.search-section input {
  padding: 8px;
  border: 1px solid #999;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #2b3d4e;
  color: #ffffff;
}

.search-section input::placeholder {
  color: #aaaaaa;
}

.search-section button {
  padding: 8px 8px;
  background-color: #18a2b8;
  border: none;
  color: #ffffff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
}

.search-section button:hover {
  background-color: #0f8499;
}

@media screen and (max-width: 576px) {
  .search-section {
    max-width: 90%;
    margin: 10px auto;
    flex-direction: column;
  }

  .search-section input {
    border-radius: 4px;
  }

  .search-section button {
    border-radius: 4px;
    margin-top: 10px;
  }
}
</style>
